<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta charset="utf-8" name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<title>售后服务-首页</title>
<link rel="stylesheet"
	href="../../components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet"
	href="../../components/datetimepicker/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet"
	href="../../components/bootstrapValidator/css/bootstrapValidator.css"
	type="text/css" />
<script type="text/javascript"
	src="../../components/jquery2.1.1/jquery.min.js"></script>
<script type="text/javascript"
	src="../../components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="../../components/datetimepicker/js/bootstrap-datetimepicker.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="../../components/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="../../components/bootstrapValidator/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="../../js/common/common.js"></script>
<script type="text/javascript" src="../../js/maintain/sosHelp.js"></script>

<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>


<style type="text/css">
.placeholders {
	margin-bottom: 30px;
	text-align: center;
}

.placeholders h4 {
	margin-bottom: 0;
}

.placeholder {
	margin-bottom: 20px;
}

.placeholder img {
	display: inline-block;
	border-radius: 50%;
}

.underline_model {
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
}

.center-vertical {
	margin-top: 25px;
}

html, body {
	width: 100%;
	height: 100%;
}

* {
	margin: 0px;
	padding: 0px;
}

#container {
	min-width: 100%;
	min-height: 10%;
}

.carousel-control.left {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0) 0,
		rgba(0, 0, 0, .0001) 100%);
}

.carousel-control.right {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0,
		rgba(0, 0, 0, .0) 100%);
}
</style>


</head>
<body onload="init()">
	
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-5 col-sm-5">
				<label>常用电话</label>
			</div>
			<div class="col-xs-7 col-sm-7">
			<a href="#" id=telPho ><span class="glyphicon glyphicon-earphone" tyle="color: rgb(255, 0, 0);"></span></a>
				<select id="insuranceList" onchange="setPhone()">
				</select>
			</div>
		</div>
	</div>
	
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-12 col-sm-12">
				<label>当前位置：</label><label id="localAddress">上海市长宁区定西路1100号辽油大厦</label>
			</div>
		</div>
	</div>
	<!-- 地图 -->
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-12 col-sm-12">
				<div id="container"></div>

			</div>
		</div>
	</div>
	<p><p>
	<!-- 经销商列表 -->
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="row ">
			<div class="col-xs-12 col-sm-12">
				<div id="dealerList">
					
				</div>
			</div>
		</div>
	</div>
	<!-- 品牌服务救援电话 -->
	<p>
	<p>
	<p>
	<div class="container" style="background-color: rgb(242, 242, 242);">
		<div class="col-xs-6 col-sm-6">
			<label>BMW紧急救援</label>
		</div>
		<div class="col-xs-6 col-sm-6 text-right">
			<a href="tel:400-821-9999"><label><span
					class="glyphicon glyphicon-earphone" style="color: rgb(255, 0, 0);"></span>400-821-9999<span></span></label></a>
		</div>
	</div>


	<script>
	var rootPath = getRootPath();
	var geocoder,map, marker,info ;
	var openId = getQueryParamValue("openId");
	//定义坐标 

			function init() {
		
				var totalheight=$(window).height();
				$("#container").height(totalheight * 0.5);
				var myOptions = {
					zoom : 13,
					center : new qq.maps.LatLng(31.211614674365336,
							121.42399206620844)
				};
				map = new qq.maps.Map(document.getElementById("container"),
						myOptions);
			    info = new qq.maps.InfoWindow({map: map});
			    
				//调用获取位置方法
				geocoder.getAddress(new qq.maps.LatLng(31.211614674365336,
						121.42399206620844));
				
				
				// 
				$.ajax({
			        type:"GET", 
			        url:rootPath + "/wechat/api/maintain/getSosDealers?lat=31.211614674365336&lng=121.42399206620844", 
			        dataType:"json",      
			        async: false,
			        contentType:"application/json",               
			        data:null, 
			        success:function(data){ 
			        	var resultCode = data.resultCode;
			        	if (1 != resultCode){
			        		 alert("获取最近的经销出错！！");
			        		 return;
			        	}
			        	var zjList = data.zjList;
			            // 编辑轮播信息数据
						var wholeHtml = '';
						// 轮播（Carousel）指标
						var carousel_indicatorsHtml = '<ol class="carousel-indicators">';
						
						// 轮播（Carousel）项目
						var carousel_innerHtml = '<div class="carousel-inner">';
						$.each(zjList,function(dealerIndex,dealerObj){
							
							var dealerLatlng = new qq.maps.LatLng(dealerObj.LAT,dealerObj.LNG);
							if (0 == dealerIndex){
							    carousel_indicatorsHtml+= '<li data-target="#dealerList" data-slide-to='+dealerIndex+' class="active"></li>';
							    carousel_innerHtml += "<div class='item active'>";
							    //品牌CODE赋值
							    //$("#brandCode").val=carModelObj.brandCode;
							} else {
								carousel_indicatorsHtml+= '<li data-target="#dealerList" data-slide-to='+dealerIndex+' ></li>';
								carousel_innerHtml += "<div class='item'>";
							}
							
							carousel_innerHtml += '<div class="row ">';
							carousel_innerHtml += '<div class="col-xs-6 col-sm-6">';
							carousel_innerHtml += '<a href="#" onclick = "to_dealer('+dealerObj.LAT+','+dealerObj.LNG+')" ><span class="glyphicon glyphicon-map-marker" style="color: rgb(0, 0, 255);">';
							carousel_innerHtml += dealerObj.DEALER_NAME;
							carousel_innerHtml += '</span> </a>';
							carousel_innerHtml += '</div>';
							carousel_innerHtml += '<div class="col-xs-6 col-sm-6 text-right">';
							carousel_innerHtml += '<a href="#" onclick="sendSos('+dealerObj.LAT+','+dealerObj.LNG+','+dealerObj.DEALER_CODE+',\''+openId+'\')"> <span class="glyphicon glyphicon-send" style="color: rgb(0, 0, 255);"> 发送位置</span></a>';
							carousel_innerHtml += '</div></div>';
							carousel_innerHtml += '<div class="row "> <div class="col-xs-6 col-sm-6"> <label>';
							carousel_innerHtml += dealerObj.DETAIL_ADDRESS+' | 约'+dealerObj.jl + '米';
							carousel_innerHtml += '</label></div>';
							carousel_innerHtml += '	<div class="col-xs-6 col-sm-6 text-right">';
							carousel_innerHtml += '<a href="tel:'+dealerObj.SOS_TEL+'"><label><span class="glyphicon glyphicon-earphone"	style="color: rgb(255, 0, 0);"></span>';
							carousel_innerHtml += dealerObj.SOS_TEL;
							carousel_innerHtml += '<span></span></label></a></div></div>';
							
							// TODO 地图标记
							
					        var marker = new qq.maps.Marker({
					        	map:map,
					            position: dealerLatlng
					        });

					        //添加监听事件 当标记被点击了  设置图层
					        qq.maps.event.addListener(marker, 'click', function() {
					            info.open();
					            info.setContent('<div style="width:280px;height:100px;">'+
					            		dealerObj.DEALER_NAME+'</div>');
					            info.setPosition(dealerLatlng);
					        });
							
						});
						
						carousel_indicatorsHtml += "</ol> ";
						carousel_innerHtml += "</div>";
						
						// 轮播（Carousel）导航
//						var carousel_controlHtml = '<a class="carousel-control left"  href="#dealerList"  data-slide="prev">&lsaquo;</a>';
//						    carousel_controlHtml += '<a class="carousel-control right" href="#dealerList"  data-slide="next">&rsaquo;</a>';
						
//						 $("#dealerList").append(carousel_indicatorsHtml + carousel_innerHtml + carousel_controlHtml );
						$("#dealerList").append(carousel_indicatorsHtml + carousel_innerHtml );
						
						
			        	
			        },
			        error:function(data){
			        	alert("获取最近的经销出错！！");
			        }
			     });
				
				
				
			}
			
			

			geocoder = new qq.maps.Geocoder({
			    complete : function(result){
			    	$("#localAddress").style='inline';
			    	$("#localAddress").text(result.detail.address);
			        map.setCenter(result.detail.location);
			        var marker = new qq.maps.Marker({
			            map:map,
			            position: result.detail.location
			        });

			        //添加监听事件 当标记被点击了  设置图层
			        qq.maps.event.addListener(marker, 'click', function() {
			            info.open();
			            info.setContent('<div style="width:280px;height:100px;">'+
			                result.detail.address+'</div>');
			            info.setPosition(result.detail.location);
			        });
			    }
			});

			/**
			 * 取得保险公司信息
			 */
			$.ajax({    type : "GET",
						url : rootPath+"/wechat/api/maintain/getInsuranceList",
						dataType : "json",
						async : false,
						contentType : "application/json",
						data : null,
						success : function(data) {
							
							$.each(data,function(insuranceIndex, insuranceObj) {
								if (0==insuranceIndex){
									$("#telPho").attr("href","tel:"+insuranceObj.phone);
									$("#insuranceList").append("<option value='"+insuranceObj.phone+"' selected>"+insuranceObj.companyName +'   '+ insuranceObj.phone+"</option>");
								}
								$("#insuranceList").append("<option value='"+insuranceObj.phone+"' >"+insuranceObj.companyName +'   '+ insuranceObj.phone+"</option>");
							});
						},
						error : function(data) {
							alert("获取保险公司出错！！");
						}
					});			
			
			// 定位经销商
			function to_dealer(lat,lng){
				 map.panTo(new qq.maps.LatLng(lat,lng));
			}
			
		</script>
</body>
</html>